<template>
	<view class="container">
		<phone-header
			class="header-height"
			title="选择机型"
			titleColor="#fff"
			bgColor="#4CCCD5"
			titleFontWeight="none"
			@tapRight="tapRight"
			@tapLeft="tapLeft"
		>
		</phone-header>
		<!-- 商品分类 -->
		<view class="shop-class">
			<!-- shop-class-left -->
			<view class="shop-class-left">
				<view v-for="(classItem, index) in  allPhone" :key="index">
					<view class="shop-phone-item class-item" @tap="classCurrentFun(index)">
						<text :class="{'class-current': classCurrentId === index}">{{ classItem.name }}</text>
					</view>
					<template v-if="classCurrentId === index">
						<block v-for="(phone, i) in classItem.model" :key="i">
							<view class="shop-phone-item phone-item" @tap="phoneCurrentFun(index, i, phone)">
								<text :class="{'phone-current': arr[index] == i}">{{ phone.name }}</text>
							</view>
						</block>
					</template>
				</view>
			</view>
			<!-- shop-class-right -->
			<view class="shop-class-right" style="flex: 1;">
				<scroll-view scroll-y="true" :style="{height: scrollViewHidth + 'px',width: '100%',background: '#ffffff'}">
					<ul class="phone-img-box">
						<block v-for="(item, index) in phoneName" :key="index">
							<li class="phone-img-item">
								<image src="http://www.exiufix.com//uplodefiles/6c1df1608dc146a8b9f2c4a54e3c969e.jpeg" mode="widthFix"></image>
								<text>{{item.name}}</text>
							</li>
						</block>
					</ul>
				</scroll-view>
			</view>
		</view>
	</view>

</template>

<script>
	import phoneHeader from '../../components/phone-header/phone-header'
	
	export default {
		data() {
			return {
				arr: [],
				classCurrentId: 0,
				phoneCurrentId: [],
				phoneName: [],
				scrollViewHidth: 0,
				phoneHeight: 0,
				navHeight: 0,
				allPhone: [
					{
						name: "苹果",
						model: [
							{
								name: 'iphone',
								phoneName: [
									{
										name: 'iphone7',
										img: ''
									},
									{
										name: 'iphone7 Plus',
										img: ''
									},
									{
										name: 'iphon8',
										img: ''
									},
									{
										name: 'iphone8 Plus',
										img: ''
									},
									{
										name: 'iphoneX',
										img: ''
									}
								]
							},
							{
								name: 'ipad',
								phoneName: [
									{
										name: 'ipad',
										img: ''
									},
									{
										name: 'ipad pro',
										img: ''
									}
								]
							}
						]
					},
					{
						name: '魅族',
						model: [
							{
								name: '魅族',
								phoneName: [
									{
										name: '魅族16',
										img: ''
									},
									{
										name: '魅族16 Plus',
										img: ''
									},
									{
										name: '魅族16s',
										img: ''
									}
								]
							},
							{
								name: '魅蓝',
								phoneName: [
									{
										name: '魅蓝note5',
										img: ''
									},
									{
										name: '魅蓝note6',
										img: ''
									},
									{
										name: '魅蓝note8',
										img: ''
									}
								]
							}
						]
					},
					{
						name: '华为',
						model: [
							{
								name: '荣耀'
							}
						]
					}
				]
			}
		},
		components: {
			phoneHeader
		},
		methods: {
 			classCurrentFun(index) {
				this.classCurrentId = index
				this.phoneName = this.allPhone[index].model[this.arr[index]].phoneName
			},
			phoneCurrentFun(index, i, phone) {
				this.$set(this.arr, index, i)
				this.phoneName = phone.phoneName
			},
			tapRight() {
				uni.navigateTo({
					url: './../search/index'
				})
			},
			tapLeft() {
				
			}
		},
		onLoad() {
			/*
				*默认设置手机分类为第一个
			*/
			for (let i = 0; i < this.allPhone.length; i++) {
				this.arr[i] = 0
			}
			this.phoneName = this.allPhone[0].model[0].phoneName
			
		},
		onReady() {
			/*
				*需求：计算出scroll-view的高度，填满设备剩余的高度
				* 实现：获取设备的可见高度，获取header-phone组件的高度
				* 屏幕总高度（_this.phoneHeight） - header-phone的高度（_this.navHeight） = scroll-view的高度（_this.scrollViewHidth）
			*/
			// 手机屏幕的高度
			let _this = this
			uni.getSystemInfo({
				success(res) {
					_this.phoneHeight = res.windowHeight
					
					// header组件的高度
					let view = uni.createSelectorQuery().select(".header-height");
					view.boundingClientRect (data => {
						_this.navHeight = data.height
						_this.scrollViewHidth = _this.phoneHeight - _this.navHeight
					}).exec()
				}
			})
		}
	}
</script>

<style lang="scss">
	.shop-class {
		display: flex;
		.shop-class-left {
			.shop-phone-item {
				width: 180upx;
				height: 96upx;
				line-height: 96upx;
				color: #232323;
				text-align: center;
				.class-current {
					color: #4CCCD5;
					padding: 0 4upx 4upx;
					border-bottom: 2upx solid #4CCCD5;
				}
			}
			.class-item {
				font-size: 30upx;
				background: #ffffff;
				border-right: 2upx solid #e4e4e4;
				border-bottom: 2upx solid #e4e4e4;
			}
			.phone-item {
				font-size: 24upx;
				border-bottom: 2upx solid #EBEBEB;
				.phone-current {
					color: #4CCCD5;
				}
			}
		}
		.shop-class-right {
			.phone-img-box {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 100%;
				.phone-img-item {
					width: 50%;
					color: #232323;
					font-size: 32upx;
					font-weight: 500;
					text-align: center;
					overflow: hidden;
					box-sizing: border-box;
					border-right: 1px solid #f8f8f8;
					border-bottom: 1px solid #f8f8f8;
					padding-bottom: 20upx;
					image {
						width: 90%;
						padding: 20upx 0;
					}
				}
			}
		}
	}
</style>
